<!--
 * @FileDescription 诊断仪
 * @Author lz
 * @Date 20230612 15:21:31
 * @LastEditors lz
 * @LastEditTime 20230612 15:21:31
-->
<template>
  <div class="Dia_wp">
    <div>
      <div class="Popup">
        <div class="titBox">
          诊断仪
          <close-outlined class="cancel" @click="cancel" />
        </div>
        <div class="dataflow">
          <img
            src="/public/images/诊断仪-diagnostic-apparatus/数据流.png"
            @click="dataflow"
          />
          <span class="txt">数据流</span>
        </div>
        <div class="readDefaultCode">
          <img
            src="/public/images/诊断仪-diagnostic-apparatus/读取故障码.png"
            @click="readCode"
          />
          <span class="txt">读取故障码</span>
        </div>
      </div>
    </div>
    <dataFlow v-if="HomeContent.Default.DataFlow.value"></dataFlow>
    <readDefectCode v-if="HomeContent.Default.ReadDefaultCode.value"></readDefectCode>
  </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from "@ant-design/icons-vue";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { onMounted, reactive, ref } from "vue";
import readDefectCode from "../DiagnosticApparatus/readDefectCode.vue";
import dataFlow from "../DiagnosticApparatus/dataFlow.vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const state = reactive({
  tabList: <any>[],
});
//关闭
function cancel() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_DECODER_CLOSE
    )
  );
  HomeContent.Default.DiagnosShow.value = false;
  HomeContent.Default.DataFlow.value = false;
  HomeContent.Default.ReadDefaultCode.value = false;
}
//读取
async function readCode() {
  HomeContent.Default.ReadDefaultCode.value = true;
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_DECODER_READ_FAULT_CODE
    )
  );
  console.log("故障码++++++++++++++++++++++++++++", JSON.parse(newArr.Content).Result);
  state.tabList = JSON.parse(newArr.Content).Result;
  for (let i = 0; i < state.tabList.length; i++) {
    task(i);
  }
}
function task(i: any) {
  setTimeout(function () {
    let newData = state.tabList[i].split(":");
    console.log(";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;", newData);
    HomeContent.Default.DefaultCodeData.value.push(newData);
  }, 500 * i);
}
// 数据流
async function dataflow() {
  HomeContent.Default.DataFlow.value = true;
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_DECODER_DATA_STREAM
    )
  );
  HomeContent.Default.DataFlowData.value = JSON.parse(newArr.Content).Result;
  console.log("+++++++++++++++++++++++++++++", HomeContent.Default.DataFlowData.value);
}
</script>

<style scoped>
.Dia_wp {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.1);
  position: relative;
}

.Popup {
  width: 1220px;
  height: 660px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
}

.titBox {
  height: 54px;
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
  margin-top: 30px;
  margin-left: 40px;
}

.cancel {
  font-size: 28px;
  font-weight: 600;
  float: right;
  margin-top: 4px;
  margin-right: 30px;
}
.dataflow {
  position: absolute;
  width: 130px;
  height: 180px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  top: 153px;
  left: 94px;
}
.readDefaultCode {
  position: absolute;
  width: 130px;
  height: 180px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  top: 153px;
  left: 303px;
}
.txt {
  color: #000000;
  display: inline-block;
  margin-top: 18px;
}
</style>
